<template>
  <div>
    {{infoData}}
    <div class="item">
      <label>项目名称：</label>
      <DetailCom :handle-type="handleType" :now-value="infoData.name" :old-value="oldInfoData.name">
        <input v-model="infoData.name"/>
      </DetailCom>

    </div>
    <div class="item">
      <label>项目级别：</label>
      <DetailCom :handle-type="handleType" :now-value="levelMap[infoData.level]" :old-value="levelMap[oldInfoData.level]">
        <el-select v-model="infoData.level">
          <el-option v-for="item in Object.keys(levelMap)" :key="item"  :label="levelMap[item]" :value="item"></el-option>
        </el-select>
      </DetailCom>
    </div>
    <div class="item">
      <label>是否有第三方：</label>
      <DetailCom :handle-type="handleType" :now-value="infoData.needOther ? '是' : '否'" :old-value="oldInfoData.needOther ? '是':'否'">
        <input type="radio" v-model="infoData.needOther" :value="true" name="needOther" />是
        <input type="radio" v-model="infoData.needOther" :value="false" name="needOther" />否
      </DetailCom>
    </div>
    <div class="item">
      <label>人群：</label>
      <DetailCom :handle-type="handleType" :now-value="infoData.people" :old-value="oldInfoData.people">
        <el-table :data="infoData.people">
          <el-table-column label="人群名称" prop="crowd">
            <template #default="scope">
              <el-input v-model="scope.row.crowd"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="投放时间" prop="time">
            <template #default="scope">
              <el-date-picker v-model="scope.row.time" type="date" value-format="YYYY-MM-DD" ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="人群量级" prop="size">
            <template #default="scope">
              <el-input v-model="scope.row.size"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <template #view="{nowValue,oldValue,isDiff}">
          <el-table :data="infoData.people">
            <el-table-column label="人群名称" prop="crowd">
              <template #default="scope">
                <DetailCom :handle-type="handleType" :now-value="scope.row.crowd" :old-value="oldInfoData.people[scope.$index].crowd">
                  <el-input v-model="scope.row.crowd"></el-input>
                </DetailCom>
              </template>
            </el-table-column>
            <el-table-column label="投放时间" prop="time">
              <template #default="scope">
                <DetailCom :handle-type="handleType" :now-value="scope.row.time" :old-value="oldInfoData.people[scope.$index].time">
                  <el-date-picker v-model="scope.row.time" type="date" value-format="YYYY-MM-DD" ></el-date-picker>
                </DetailCom>
              </template>
            </el-table-column>
            <el-table-column label="人群量级" prop="size">
              <template #default="scope">
                <DetailCom :handle-type="handleType" :now-value="scope.row.size" :old-value="oldInfoData.people[scope.$index].size">
                  <el-input v-model="scope.row.size"></el-input>
                </DetailCom>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </DetailCom>
    </div>
    <div class="item" v-if="handleType !== 'view'">
      <el-button @click="()=>{
        infoData.people.push({
          crowd:'',
          time:'',
          size:''
        })
      }">添加人群</el-button>
    </div>
    <div class="item">
      <el-button @click="addInfoData" v-if="handleType==='create'">提交</el-button>
      <el-button @click="addInfoData" v-if="handleType==='edit'">修改</el-button>
      <el-button @click="()=>{
        router.push('/project/list')
      }" v-if="handleType==='view'">
        返回
      </el-button>
    </div>
  </div>
</template>
<script setup>
import {levelMap} from '@/constant'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DetailCom from '@/components/DetailCom.vue'

const router = useRouter()
const {query} = useRoute()
const infoData = ref({})
const oldInfoData = ref({})

const handleType = query.handleType;
const id = query.id;
if(handleType === 'create'){
  infoData.value={
    name:"",
    level:"",
    needOther:false,
    people:[]
  }
}else if(handleType === 'edit' || handleType === 'view'){

  const data = JSON.parse(localStorage.getItem('infoDatas')).filter(item => item.id == id)[0]
  infoData.value = data.nowInfo
  if(handleType === 'view'){
    oldInfoData.value = data.oldInfo
  }
  console.log("infoData",infoData.value)
  console.log("oldInfoData",oldInfoData.value)
}
const addInfoData = () => {
  let data = JSON.parse(localStorage.getItem('infoDatas') !== null ? localStorage.getItem('infoDatas') : '[]')
  if(handleType === 'create'){
    data.push({
      id:Date.now(),
      oldInfo:{},
      nowInfo:infoData.value
    })
  }else if(handleType === 'edit'){
    data = data.map(item => {
      if(item.id == id){
        item.oldInfo = item.nowInfo
        item.nowInfo = infoData.value
      }
      return item
    })
  }
  console.log(data)
  localStorage.setItem('infoDatas',JSON.stringify(data))
  router.push('/project/list')
}
const renderPeopleStr = (people) => {
  console.log("people:",people)
  return people.map(item => item.crowd).join(',')
}
</script>

<style scoped>
.diffColor{
  background-color: red;
}
</style>
